<template>
<div>
    <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
            <span class="iconfont icon-shezhi"></span>设置
            <el-icon class="el-icon--right">
                <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item :command="item.url" v-for="item in menusList" :key="item.id">
                    <span class="iconfont" :class="item.ico"></span> {{ item.name }}
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</div>
</template>
<script lang="ts" setup>
import {useRouter} from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
// import { Menu } from '../../service/menu/type'
import {useUserStore} from '../../store/index'
import { storeToRefs } from 'pinia';
const store =useUserStore()

const {menus} = storeToRefs(store)
const router=useRouter();
// let menuList = JSON.parse(sessionStorage.getItem("menu")!) as Array<Menu>;


let menusList:any[] = menus.value.filter((item:any) => item.pid === 0 && item.postion === "top");

const handleCommand = (command: string | number | object) => {

 router.push(command as string);
 
}


</script>
<style scoped lang="less">
 
    .el-dropdown-link {
        cursor: pointer;
        display: flex;
        align-items: center;
        border: none;

    }

</style>